<!doctype html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <style></style>
  </head>
  <body>
    <div id="app">
      <div @click="fn1">
        <!-- .prevent阻止默认行为 -->
        <a href="www.baidu.com" @click.prevent="age++">{{age}}</a>
        <!-- .stop阻止冒泡 -->
        <button @click.stop="age++">+1岁(阻止bubble)</button>
      </div>
      <div>
        <!-- .enter 回车添加 -->
        <input type="text" v-model="newName" @keyup.enter="fn" />
        <button @click="fn">添加</button>
      </div>

      <ul>
        <li v-for="(item,index) in list">
          <button @click="list.splice(index,1)">{{item.name}}删除</button>
        </li>
      </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          age: 0,
          list: [
            {
              id: 1,
              name: '张三',
            },
            {
              id: 2,
              name: '李四',
            },
            {
              id: 3,
              name: '王五',
            },
          ],
          newName: '',
        },
        methods: {
          fn() {
            this.list.push({
              id: Date.now(),
              name: this.newName,
            })
            this.newName = ''
          },
          fn1() {
            alert('bubble')
          },
        },
      })
    </script>
  </body>
</html>
